<template>
    <el-dialog
            title=""
            :visible.sync="visible"
            width="60%"
            center
            :close-on-click-modal="false"
    >
        <div class="FormsDiv">
            <el-form :model="RolesFrom" :rules="ruleRoles" ref="RolesFrom" label-width="120px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="role_name">
                    <el-input v-model="RolesFrom.role_name" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-form-item label="功能描述" prop="role_description">
                    <el-input  type="textarea"  v-model="RolesFrom.role_description"  placeholder="请输入描述" maxlength="255" show-word-limit></el-input>
                </el-form-item>
              <el-form-item>
                <el-radio v-model="RolesFrom.is_delete" :label="0" border>激活</el-radio>
                <el-radio v-model="RolesFrom.is_delete" :label="1" border>禁用</el-radio>
              </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('RolesFrom')">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>



</template>

<script>
import {getRoleNameRule} from "@/utils/validateFrom";
import { rolesSave } from "@/api/api";

export default {
    props:{
        visibleChild: {
            type:Boolean,
            default:false
        },
        childFrom:{
          type:Object,
          default(){
            return {
              role_id:-1,
              role_name:'',
              role_description:'',
              is_delete:0
            };
          }
        },
        roleId:{
          type:Number,
          default() {
            return -1;
          }
        }
    },
    data(){
        return {
            RolesFrom:JSON.parse(JSON.stringify(this.childFrom)),
            role_id:this.roleId,
            ruleRoles:{
                role_name: [{ validator: getRoleNameRule,min:4,max:16,required: true,trigger: 'blur',roleId:this.role_id}],
                role_description: [{required: true,trigger: 'blur',message:'描述必填'}],
            },
        }
    },
    watch:{
    // 这样才能算得上动态监控,不然初始渲染的就会一直保留
    childFrom:{
      // 监听数据发生变化的处理函数
      handler(newValue) {
        this.RolesFrom = JSON.parse(JSON.stringify(newValue));//将监听到修改的值赋予到dataAttrs中
      },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },
      roleId:{
        // 监听数据发生变化的处理函数
        handler(newValue) {
          this.role_id = newValue;
          this.ruleRoles.role_name["0"].roleId = newValue;
          console.log(" this.ruleRoles", this.ruleRoles);
          // this.ruleUsers.email["0"].userId = newValue;
        },
      // 是否开启深度监听，由于我们上面props中是一个Object对象，所以需要开启深度监听功能
      deep: true
    },
  },
    computed:{
        visible:{
           get(){
                return this.visibleChild;
           },
           set(newValue){
               this.$emit("update:visibleChild",newValue);
           }
        }
    },
    methods: {
        submitForm(){
          this.$refs.RolesFrom.validate((validate)=>{
            if (validate){
              rolesSave(this.RolesFrom).then((res) =>{
                if (res.code === 200){
                  // 重置初始界面
                  this.RolesFrom = {
                    role_id : -1,
                    role_name:'',
                    role_description:'',
                    is_delete:0
                  };
                  this.$parent.roles([],this.$parent.queryInfo.page,this.$parent.queryInfo.pageSize);
                  this.$message.success('保存成功');
                }
              }).catch(error =>{
                this.$message.error(error.message || 'Error');
              })
            }else {
              this.$message.error('错误');
            }
          })
            //关闭弹窗
            this.visible = false;
        },
    }
}
</script>

<!--<style scoped>-->
<!--.FormsDiv{-->
<!--    width: 100%;-->
<!--    min-height: 100%;-->
<!--    padding: 15px;-->
<!--    box-sizing: border-box;-->
<!--}-->
<!--</style>-->